<template>
	<div id="actives">
		<div class="fixed">
			<div class="title flex">
				<div class="title_left">
					<img @click="back" src="../assets/image/return.png" />
				</div>
				<div class="add">
					优惠详情
				</div>
				<div class="title_right">
					<img @click="showtost" src="../assets/image/shar.png" />
				</div>
			</div>
		</div>
		<div class="lists">
			<div class="list flex">
				<div class="qian">
					<div v-if="mage.coupons_type==1">{{mage.coupons_money}}</div>
					<div v-if="mage.coupons_type==2">{{mage.coupons_discount}}</div>
					<img v-if="mage.coupons_type==1" style="width: 0.4217rem;height: 0.5217rem;" src="../assets/image/qian.png" />
					<img v-if="mage.coupons_type==2" style="width: 0.565217rem;height: 0.8043rem;" src="../assets/image/zhe.png"/>
				</div>
				<div class="xian">
					<img src="../assets/image/fengexain.png" />
				</div>
				<div class="right flex">
					<div v-if="mage.coupons_type==1">满{{mage.full_money}}元享满减</div>
					<div v-else-if="mage.coupons_type==2">满{{mage.full_money}}元享折扣</div>
					<div class="data">
						<span>有效期：</span>
						<div>{{mage.coupons_start_time}}至{{mage.coupons_end_time}}</div>
					</div>
				</div>
			</div>
			<div class="detail">
				<p>使用说明</p>
				<div class="shiyong_detail" v-if="mage.use_desc==null">
					该商家太懒什么都没有写！
				</div>
				<div class="shiyong_detail" v-else-if="!mage.use_desc">
					该商家太懒什么都没有写！
				</div>
				<div class="con">
					<div class="shopname">
						店铺：<span>{{mage.store_name}}</span>
					</div>
					<div class="phone">
						联系电话：<span style="color: #007AFF;">{{mage.store_phone}}</span>
					</div>
					<div class="address">
						地址：<span>{{mage.store_address}}</span><img src="../assets/image/dingwei.png" />
					</div>
				</div>
			</div>
		</div>
		<div class="mask">
			<div class="tishi">
				<div class="tishi_img">
					<img src="../assets/image/share.png"/>
				</div>
				
				<div>点击右上角</div>
				<div>邀请好友领取优惠券</div>
			</div>
			<div class="foot flex">
				<p>分享到</p>
				<div class="shares flex">
					<div class="share flex" @click="weixin">
						<img src="../assets/image/weiixn.png" />
						<p>微信</p>
					</div>
					<div class="share" @click="weixin">
						<img src="../assets/image/pengyouquan.png" />
						<p>朋友圈</p>
					</div>
					<div class="share" id="local" data-clipboard-action="copy" @click="copy">
						<img src="../assets/image/copy.png" />
						<p>复制页面地址</p>
					</div>
					<div class="share" @click="skip_share_ma(mage)">
						<img src="../assets/image/erweima.png" />
						<p>二维码海报</p>
					</div>
				</div>
				<div class="btn" @click="yincang">
					取消
				</div>
			</div>

		</div>

	</div>

</template>

<script>
	import Clipboard from 'clipboard';
	export default {
		data() {
			return {
				isActive: 0,
				show: -1,
				activeIndex: -1,
				locations: '',
				mage:''

			}
		},
		//在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
		created: function() {
			this.locations = window.location.href
		},
		methods: {
			back() {
				this.$router.go(-1)
			},
			showop(index) {
				let that = this;
				if (that.show == index) {
					that.show = -1; //在这里就将它赋值为-1  由于：-1 !=  index 所以其他内容隐藏 ，被点击的则打开
				} else {
					that.show = index; //这里是把index赋值给isShow，isShow=index则显示
				}

			},
			//查看详情
			creat_c() {
				this.$router.push({
					path: '/Create_coupons'
				});
			},
			showtost() {
				$(".mask").css('display', 'block');

			},
			yincang() {
				$(".mask").css('display', 'none');
			},
			weixin(){
				$(".tishi").css('display', 'block');
			},
			skip_share_ma(e) {
				console.log(e)
				this.$router.push({
					path: '/share_ma',
					query:{
						market_id:e.market_id,
						url:window.location.href,
						store_id:e.market_store_id
					}
					
				});
			},
			//复制当前链接地址
			copy() {
              $(".tishi").css('display', 'none');
				var that = this
				let clipboard = new Clipboard('#local', {
					text: function() {
						return that.locations
					}
				})
				clipboard.on('success', e => {
					this.$message({
						message: '复制成功',
						showClose: true,
						type: 'success'
					})
					// 释放内存
					clipboard.destroy()
				})
				clipboard.on('error', e => {
					this.$message({
						message: '复制失败,',
						showClose: true,
						type: 'error'
					})
					clipboard.destroy()
				})


			},
			wx_fenxiang() {
				var that = this;
				//微信相关
				if(window.navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == 'micromessenger') {
					var wqurl = encodeURIComponent(window.location.href);
					console.log(wqurl)
					wqurl = encodeURIComponent(wqurl);
					console.log(wqurl)
					$.ajax({						
						url: that.baseURL+"/index.php/waveguest/jssdk/getConfig?url=" + wqurl,
						type: 'get',
						dataType: 'json',
						success: function(result) {
							console.log(result)
							if(result.code == '200') {
								jQuery.getScript("http://res.wx.qq.com/open/js/jweixin-1.2.0.js", function() {
									wx.config({
										debug: true,
										appId: result.data.config.appId,
										timestamp: result.data.config.timestamp,
										nonceStr: result.data.config.nonceStr,
										signature: result.data.config.signature,
										jsApiList: [
											'checkJsApi',
											'onMenuShareTimeline',
											'onMenuShareAppMessage',
											'onMenuShareQQ',
											'onMenuShareWeibo',
											'hideMenuItems',
											'showMenuItems',
											'hideAllNonBaseMenuItem',
											'showAllNonBaseMenuItem',
											'translateVoice',
											'startRecord',
											'stopRecord',
											'onRecordEnd',
											'playVoice',
											'pauseVoice',
											'stopVoice',
											'uploadVoice',
											'downloadVoice',
											'chooseImage',
											'previewImage',
											'uploadImage',
											'downloadImage',
											'getNetworkType',
											'openLocation',
											'getLocation',
											'hideOptionMenu',
											'showOptionMenu',
											'closeWindow',
											'scanQRCode',
											'chooseWXPay',
											'openProductSpecificView',
											'addCard',
											'chooseCard',
											'openCard'
										]
									});
									wx.ready(function() {
										var share_array = {
											title: '优惠券', // 分享标题
											link: thah.$route.query.url, // 分享链接
											imgUrl: that.imgarr[0], // 分享图标
											desc: that.goodesdetail.goods_name
										};
										wx.onMenuShareTimeline({
											title: share_array.desc, // 分享标题
											link: share_array.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
											imgUrl: share_array.imgUrl, // 分享图标
											success: function(res) {
												// 用户点击了分享后执行的回调函数		
												console.log(res)
											}
										});
										wx.onMenuShareAppMessage({
											title: '好货在这儿', // 分享标题
											desc: share_array.desc, // 分享描述
											link: share_array.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
											imgUrl: that.imgarr[0], // 分享图标
											type: '', // 分享类型,music、video或link，不填默认为link
											dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
											success: function(res) {
												// 用户点击了分享后执行的回调函数
												console.log(res)
											}
										});
									});
								});
							}
						}
					});
				}
			}
		},
		mounted() {        
			  this.wx_fenxiang()
				var _this = this;
				 var id = _this.$route.query.id
				var qs = require('qs');
				_this.$http.post(_this.baseURL + '/index.php/waveguest/market/market_one_detail', qs.stringify({
					"market_id": id,
					"key":localStorage.getItem("key")
				})).then(response => {
					console.log(response)
					_this.mage = response.data.data
				}).catch(error => {
				
				});
		},
	}
</script>

<style>
	.el-message {
		min-width: 4rem;
		top: 40% !important;
	}
</style>
<style scoped="scoped">
	#actives {
		background: #F5F6FA;
		height: 100%;
		width: 100%;
		position: fixed;
	}

	.title {
		width: 90%;
		padding: 0 5% 0 5%;
		height: 2rem;
		font-size: 0.7193rem;
		background: white;
		align-items: center;
	}

	.title div {
		width: calc(100%/3);
		align-items: center;
	}

	.title>div:nth-child(2) {
		text-align: center;
	}



	.title_left {
		width: 0.67391rem;
		height: 0.67391rem;
	}

	.title_left>img {
		width: 0.67391rem;
		height: 0.67391rem;
	}

	.title_right {
		width: 0.9rem;
		height: 0.9rem;
	}

	.title_right>img {
		width: 0.9565rem;
		height: 0.9365rem;
		float: right;
	}

	.lists {
		margin-top: 2rem;
		padding-top: 1rem;
	}

	.list {
		/*border: 1px solid white;*/
		margin-bottom: 0.5rem;
		margin-left: 0.5rem;
		margin-right: 0.5rem;
		padding-right: 1rem;
		padding-left: 1rem;
		background: url(../assets/image/quan_bg.png) no-repeat;
		background-size: 100%;
		border-radius: 10px;
		height: 5.8478rem;
		justify-content: space-between;
		align-items: center;
	}

	.fixed {
		position: fixed;
		top: 0;
		background: white;
		width: 100%;
		max-width: 640px;
	}

	.list>.qian {
		font-size:2.57826rem;
		color: white;
		position: relative;
	}

	.list>.qian>img {

		position: absolute;
		right: -0.5rem;
		top: 0;
	}

	.list>.right {
		font-size: 1.3043rem;
		color: white;
		flex-direction: column;
	}

	.list>.xian>img {
		width: 0.07rem;
		height: 1.7391rem;
	}

	.list>.right>.data {
		padding-top: 0.5rem;
		font-size: 0.5rem;
		color: white;

	}

	.detail {
		background: white;
		margin-bottom: 0.5rem;
		margin-left: 0.5rem;
		margin-right: 0.5rem;
		padding: 1rem;
		border-radius: 10px;
		font-size: 0.60869rem;
		font-weight: 600;
	}

	.shiyong_detail {
		font-size: 0.5652rem;
		color: #868E91;
		font-weight: 400;
		padding-top: 0.3rem;
	}

	.con {
		margin-top: 1.1rem;
		padding-bottom: 1rem;
	}

	.con>div {
		padding-bottom: 0.3rem;
	}

	.con span {
		color: #868E91;
		font-weight: 400;
	}

	.con>div>img {
		width: 0.7608rem;
		height: 0.7608rem;
		padding-left: 0.3rem;
	}

	.mask {
		position: fixed;
		width: 100%;
		left: 0;
		top: 0;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.4);
		transition: all 0.2s ease-in;
		z-index: 999;
		display: none;

	}

	.foot {
		background: #F5F6FA;
		position: fixed;
		bottom: 0;
		width: 100%;
		border-radius: 0.4rem 0.4rem 0rem 0rem;
		height: 8.7391rem;
		z-index: 99999;
		flex-direction: column;
	}

	.foot>p {
		font-size: 0.56522rem;
		color: #868E91;
		height: 2.565217rem;
		line-height: 2.565217rem;
		padding-left: 1.5rem;

	}

	.shares {
		justify-content: space-around;

	}

	.share {
		justify-content: center;
		align-items: center;
		flex-direction: column;
		text-align: center;
		width: 4rem;
	}

	.share>img {
		width: 1.7391rem;
		height: 1.7391rem;
	}

	.share>p {
		font-size: 0.56522rem;
		color: #3E474E;
		padding-top: 0.3rem;
	}

	.btn {
		position: fixed;
		bottom: 0;
		width: 100%;
		background: white;
		height: 2rem;
		line-height: 2rem;
		text-align: center;
		color: #3E474E;
		font-size: 0.6087rem;
		
	}

	.tishi{
		width: 80%;
		margin: auto;
		height: 10rem;
		font-size: 0.7826rem;
		color: white;
		display: none;
	}
	.tishi .tishi_img{
		width: 100%;
		height: 6.7rem;
	}
	.tishi img{
		width: 5rem;
		height: 6.7rem;
		float: right;
	}
	.tishi>div{
		text-align: center;
	}
	
</style>
